<template>
    <div class="body">
      <header class="head">
        <div class="left" @click="returnClick">
          <img src="../../assets/img/return.png" style="width: 20px;height: 20px;vertical-align:middle;">
          <span style="margin-left: 5px; padding-top: 10px;font-size: 13px;color:#495060;">退出预览</span>
        </div>
        <div style="margin-top: 12px">
          <span style="color: #AAAAAA">提示：当前为预览页面，答案不被记录。</span>
        </div>
        <div style="margin-top: 6px;margin-right: 10px">
          <el-button size="medium" type="primary" plain>发布并分享</el-button>
        </div>
      </header>
      <div class="middle">
        <div class="port" style="border-right: 1px solid #eaeaea" @click="computerClick" :class="{active:comShow}">
          <img src="../../assets/img/computer.png" style="width:15px;height:15px;vertical-align:middle;">
          电脑
        </div>
        <div class="port" @click="phoneClick" :class="{active:phoShow}">
          <img src="../../assets/img/phone.png" style="width:15px;height:15px;vertical-align:middle;">
          手机
        </div>
      </div>
      <div class="computer" v-show="comShow">
        <div class="title">
          <h1 style="color: #4c4c4c;font-size: 25px">{{this.currentTitle.examname}}</h1>
          <div class="desc">（描述：{{this.currentTitle.examdesc}}）</div>
          <div class="time">
            <span>起止时间：{{dataFormat(this.currentTitle.starttime)}}——{{dataFormat(this.currentTitle.endtime)}}</span>
          </div>
          <div class="total_score">
            <p style="font-size: 15px;margin: 5px 0 2px 8px;">总分</p>
            <div style="text-align: center"><p style="font-size: 35px;font-weight: bold;">{{this.currentTitle.totalscore}}</p></div>
          </div>
        </div>
        <div class="test">
          <div v-for="(item,index) in this.currentExam" :key="index">
            <div class="ques">
              <span style="display: inline-block; margin-right: 8px; font-weight: 600">{{index + 1}}</span>
              <span v-if="item.questioncontent !== null">{{item.questioncontent}}</span>
              <span v-else>{{item.stuinfo}}</span>
            </div>
            <div v-if="item.questiontype === 1||item.questiontype === 3">
              <div class="opt" v-for="(ite,ind) in item.answer" :key="ind">
                <el-radio-group v-model="item.images">
                  <el-radio :label="ind">
                    <span>{{ite.answer}}</span>
                  </el-radio>
                </el-radio-group>
              </div>
            </div>
            <div v-if="item.questiontype === 2">
              <div class="opt" v-for="(ite,ind) in item.answer" :key="ind">
                <el-checkbox v-model="ite.preview" :label="ind">
                  <span>{{ite.answer}}</span>
                </el-checkbox>
              </div>
            </div>
            <div v-if="item.questiontype === 4">
              <div class="opt" v-for="(ite,ind) in item.answer" :key="ind">
                <el-input v-model="item.images"></el-input>
              </div>
            </div>
            <div v-if="item.questiontype === 5">
              <div v-if="item.stuinfo ==='性别'">
                <el-radio-group style="padding: 7px 0" v-model="item.images">
                  <el-radio label="0">
                    <span>男</span>
                  </el-radio>
                  <el-radio label="1">
                    <span>女</span>
                  </el-radio>
                </el-radio-group>
              </div>
              <div v-else>
                <div class="opt" >
                  <el-input v-model="item.images"></el-input>
                </div>
              </div>
            </div>
            <div v-if="item.questiontype === 6">
              <div class="opt" >
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="item.images"></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="btn">
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
      </div>

      <div class="phone" v-show="phoShow">
        <div class="top">
          <div class="one"></div>
          <div class="two"></div>
        </div>
        <div class="content">
          <div class="title">
            <h1 style="color: #4c4c4c;font-size: 16px">{{this.currentTitle.examname}}</h1>
            <div class="desc">（描述：{{this.currentTitle.examdesc}}）</div>
            <div class="time">
              <span>起止时间：{{dataFormat(this.currentTitle.starttime)}}</span>
            </div>
            <!--          <div class="total_score">-->
            <!--            <p style="font-size: 15px;margin: 5px 0 2px 8px;">总分</p>-->
            <!--            <div style="text-align: center"><p style="font-size: 35px;font-weight: bold;">{{this.currentTitle.totalscore}}</p></div>-->
            <!--          </div>-->
          </div>
          <div class="test">
            <div v-for="(item,index) in this.currentExam" :key="index">
              <div class="ques">
                <span style="display: inline-block; margin-right: 8px; font-weight: 600">{{index + 1}}</span>
                <span v-if="item.questioncontent !== null">{{item.questioncontent}}</span>
                <span v-else>{{item.stuinfo}}</span>
              </div>
              <div v-if="item.questiontype === 1||item.questiontype === 3">
                <div  v-for="(ite,ind) in item.answer" :key="ind">
                  <el-radio-group class="opt" v-model="item.images">
                    <el-radio  :label="ind">
                      <span>{{ite.answer}}</span>
                    </el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div v-if="item.questiontype === 2">
                <div class="opt" v-for="(ite,ind) in item.answer" :key="ind">
                  <el-checkbox v-model="ite.preview" :label="ind">
                    <span>{{ite.answer}}</span>
                  </el-checkbox>
                </div>
              </div>
              <div v-if="item.questiontype === 4">
                <div class="opt" v-for="(ite,ind) in item.answer" :key="ind">
                  <el-input v-model="item.images"></el-input>
                </div>
              </div>
              <div v-if="item.questiontype === 5">
                <div v-if="item.stuinfo ==='性别'">
                  <el-radio-group style="padding: 7px 0" v-model="item.images">
                    <el-radio label="0">
                      <span>男</span>
                    </el-radio>
                    <el-radio label="1">
                      <span>女</span>
                    </el-radio>
                  </el-radio-group>
                </div>
                <div v-else>
                  <div class="opt" >
                    <el-input v-model="item.images"></el-input>
                  </div>
                </div>
              </div>
              <div v-if="item.questiontype === 6">
                <div class="opt" >
                  <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="item.images"></el-input>
                </div>
              </div>
            </div>
          </div>
          <div class="btn">
            <el-button type="primary" size="mini" @click="submit">提交</el-button>
          </div>
        </div>
        <div class="buttom"></div>
      </div>
    </div>
</template>

<script>
export default {
  name: "Preview",
  data(){
    return{
      comShow:true,
      phoShow:false,

      currentTitle: '',//试卷题目
      currentExam: '',//问题

      radio: '',
      checkList: [],
      input: '',
    }
  },
  computed: {
    getCurrentExam(){
      return this.$store.state.currentExam;
    },
    getCurrentTitle(){
      return this.$store.state.currentTitle
    }
  },
  watch: {
    getCurrentExam() {
      this.currentExam = this.$store.state.currentExam.currentExam;
    },
    getCurrentTitle(){
      this.currentTitle = this.$store.state.currentTitle.currentTitle;
    }
  },
  created() {
    localStorage.getItem("testMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("testMsg"))));
    window.addEventListener("beforeunload",()=>{
      localStorage.setItem("testMsg",JSON.stringify(this.$store.state))
    })
  },
  methods:{
    returnClick(){
      this.$router.push('/Mine');
    },
    computerClick(){
      this.comShow = true;
      this.phoShow = false;
    },
    phoneClick(){
      this.comShow = false;
      this.phoShow = true;
    },

    submit(){
      this.$message.warning('当前页面为预览页面，不可以提交！！！');
    },
    dataFormat(value) {
      if (typeof value != "undefined"){
        let year = value.substr(0, 4)
        let month = value.substr(5, 2)
        let day = value.substr(8, 2)
        // var hour = value.substr(11, 2)
        // var min = value.substr(14, 2)
        // var second = value.substr(17,2)
        return year + "-" + month + "-" + day
      }else{
        value = '';
      }
    },
    // test(){
    //   console.log(this.currentTitle);
    // }
  },


}
</script>

<style scoped>
.body {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #E9EEF3;
  padding-bottom: 50px;
}
.body .head {
  display: flex;
  justify-content:space-between;
  width: 100%;
  height: 50px;
  background-color: #cddae7;
}
.body .head .left {
  margin-top: 10px;
  margin-left: 12px;
  border-radius: 5px;
  width: 80px;
  height: 20px;
  padding: 5px;
}
.body .head .left:hover {
  background-color: RGB(244,244,244);
}
.body .middle {
  margin-top: 20px;
  text-align: center;
}
.body .middle .port {
  display: inline-block;
  box-sizing: border-box;
  width: 74px;
  height: 39px;
  background: #fbfbfc;
  cursor: pointer;
  line-height: 39px;
  font-size: 12px;
  /*color: #aaa;*/
}
.active {
  color: #2672FF;
}
.body .computer {
  width: 830px;
  height: 100%;
  margin: 80px auto;
  padding: 30px 50px 66px;
  background-color: white;
  color: #666666;
  font-size: 16px;
  box-shadow: 0 2px 16px #666666, 0 0 1px #666666, 0 0 1px #666666;
  transition: all 250ms cubic-bezier(.02,.01,.47,1);
}
.body .computer:hover {
  box-shadow: 0 1rem 2rem 0 rgba(48,55,66,0.15);
  transform: translate(0,-5px);
  transition-delay: 0s !important;
}
.body .computer .title {
  position: relative;
  height: 100px;
  padding: 20px 0;
  text-align: center;
  border-bottom: 3px solid #53A4F4;
}
.body .computer .title .desc {
  color: #AAAAAA;
  margin-bottom: 5px;
}
.body .computer .title .time {
  color: #AAAAAA;
}
.body .computer .title .total_score {
  position: absolute;
  right: 15px;
  top: 40px;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background-color: #B3C0D1;
  color: white;
}
.body .computer .test {
  margin: 20px 20px;
}
.body .computer .test .ques {
  font-size: 20px;
  margin: 15px 0;
}
.body .computer .test .opt {
  width: 800px;
  margin: 5px 15px;
}
.computer .btn {
  text-align: center;
  margin-top: 20px;
}

.body .phone {
  position: relative;
  width: 350px;
  height: 650px;
  margin: 80px auto;
  border-radius: 40px;
  background-color: white;
  box-shadow: 0 2px 16px #666666, 0 0 1px #666666, 0 0 1px #666666;
  transition: all 250ms cubic-bezier(.02,.01,.47,1);
}
.body .phone:hover {
  box-shadow: 0 1rem 2rem 0 rgba(48,55,66,0.15);
  transform: translate(0,-5px);
  transition-delay: 0s !important;
}
.body .phone .content {
  position: absolute;
  top: 60px;
  left: 27px;
  width: 300px;
  height: 500px;
  border: 2px solid RGB(217,217,217);
  overflow: scroll;
}
.body .phone .content::-webkit-scrollbar{
  display: none;
}
.body .phone .content .title {
  position: relative;
  height: 80px;
  padding: 10px 0;
  text-align: center;
  font-size: 10px;
  border-bottom: 2px solid #53A4F4;
}
.body .phone .content .title .desc {
  color: #AAAAAA;
  margin-bottom: 5px;
}
.body .phone .content .title .time {
  color: #AAAAAA;
}
.body .phone .content .title .total_score {
  position: absolute;
  right: 15px;
  top: 40px;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background-color: #B3C0D1;
  color: white;
}
.body .phone .content .test {
  margin: 20px 20px;
  font-size: 15px;

}
.body .phone .content .test .ques {
  font-size: 14px;
  margin: 10px 0;
}
.body .phone .content .test .opt {
  width: 800px;
  margin: 5px 15px;
}
.body .phone .content .test .opt >>>.el-input__inner{
  width: 250px;
}
.phone .btn {
  text-align: center;
  margin-top: 20px;
}
.top {
  position: absolute;
  top: 30px;
  left: 120px;
  width: 90px;
  height: 20px;
}
.one{
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: RGB(217,217,217);
}
.two{
  float: right;
  width: 60px;
  height: 5px;
  border-radius: 5px;
  background-color: RGB(217,217,217);
}
.buttom {
  position: absolute;
  bottom: 20px;
  left: 150px;
  width: 45px;
  height: 45px;
  border-radius: 30px;
  border: 3px solid RGB(217,217,217);
}


</style>
